<!--
 * @Description:我的购物车
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-18 14:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-20 14:35:43
-->
<template>

	<view class="my-cart-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" :title="$t('home.MyCat')" @backEvent='backEvent()'>
				<view class="more-box" slot="rightIcon" style="display: flex;">
					<u-checkbox @change="CheckAll" :value="check" shape="circle">
						{{$t('storeManagement.CheckAll')}}
					</u-checkbox>

				</view>

			</c-navigation-bar>

			<u-empty :text="$t('home.catTips')" icon-size="159" mode="car" margin-top="64"
				:show="cartList.length==0"></u-empty>

			<view class="container-box">
				<view class="" style="    margin: 10px 0;
    text-align: center;
    color: #ccc;">
					{{$t('system.rightdelete')}}
				</view>
				<u-swipe-action :btnWidth="90" :show="item.show" v-for="(item,index) in cartList" :index="index"
					:key="item.goodsSpecification" @click="deleteClick(item)" :options="options" @open='open'>
					<view class="item u-border-bottom" style="display: flex;">
						<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
						<!-- <image mode="aspectFill" src="@/static/logo.png" /> -->

						<view class="title-wrap">

							<cartItem :key="item.goodsSpecification" radius="26rpx"
							 :isSeckill="true"
								:check="checkList.some(s=>s.goodsSpecification===item.goodsSpecification)" :minNum="minNumber"
								@checkChange="cartCheckChange"  :data="{
									image:item.goodsImage,
									skuName:item.goodsSpecification,
									name:item.goodsName,
									inventory:item.num,
									num:item.goodsNumber,
									price:item.goodsPrice,
									goodsId:item.goodsId
								}">
							</cartItem>
						</view>

					</view>
				</u-swipe-action>

			</view>

			<notTabbar slot="footer">
				<view class="footer-handle">
					<view class="total-price">
						<p class="total">{{$t('home.total')}} ({{ checkList.length }} {{$t('home.item')}}) :</p>
						<p class="price">${{ totalPrice }}</p>
					</view>
					<u-button @click="submitOrder" class="blue">{{$t('home.ProceedToCheckout')}}</u-button>
				</view>
			</notTabbar>
		</c-layout>
		<!--        弹框-->
		<promptDialog ref="promptDialogs_cart"></promptDialog>
	</view>
</template>

<script>
	import {
		math
	} from '@/common/math.js'
	export default {
		data() {
			return {
				// 购物车列表
				list: [123213212312321312321321],
				goodList: [],
				cartList: [],
				checkList: [],
				disabled: false,
				btnWidth: 90,
				minNumber: uni.getStorageSync('purchaseMinNum'),
				show: false,
				check: false,

				isactivity: false,
				options: [{
					text: '',
					style: {
						backgroundColor: '#2934D0',
					}
				}]
			};
		},
		onLoad() {
			uni.showLoading()
			this.$nextTick(() => {
				setTimeout(()=>{
					this.getCartList()
				},500)
			})


		},
		watch: {
			checkList(newValue, oldValue) {
				console.log(newValue)
				if (newValue.length == 0) {
					this.check = false
				}
			},
			cartList(newValue, oldValue) {
				console.log(newValue)
				if (newValue.length !== oldValue.length) {
					this.checkList = []
				}
			}
		},
		computed: {
			totalPrice() {
				if (!this.checkList.length) {
					return 0
				} else {
					let count = 0
					this.checkList.forEach(ele => {
						count = count + ele.goodsPrice * ele.goodsNumber
					});
					return count.toFixed(2)
				}
			},
		},
		methods: {
			// 前往推荐商品详情
			goProductDetail(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?productId=' + item.id
				});
			},
			// 前往活动详情
			goActice() {
				if (this.isactivity) {
					uni.navigateTo({
						url: '/pages/seckill/seckill'
					})
				} else {
					this.$u.toast(this.$t('home.catError'))
				}


			},

			// 获取购物车列表
			getCartList() {
				this.$u.post('/app/purchaseCart/getAllPage', {
					"pageNum": 1,
					"pageSize": 999
				}).then(res => {

					this.cartList = res.data.records
					uni.hideLoading()
				})
			},
			//单选
			cartCheckChange(data) {
				let { state, id } = data

				if (state) {
					console.log(this.cartList.find(f => f.goodsName == id))
					this.checkList.push(this.cartList.find(f => f.goodsSpecification == id))
				} else {
					this.checkList = this.checkList.filter(f => f.goodsSpecification !== id)
				}
			},
			// 全选
			CheckAll() {
				this.check = !this.check

				this.checkList = this.check ? this.cartList : []
			},
			// 购物车数量增加
			numChange(val, cb, item) {
				console.log(val)
				item.goodsNumber = val
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {

				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.cartList[index].show = true;
				this.cartList.map((val, idx) => {
					if (index != idx) this.cartList[idx].show = false;
				})
				this.$forceUpdate();
				console.log(this.cartList)
			},
			//删除
			deleteClick(e) {

				let array = [e.id]
				this.$u.post('/app/purchaseCart/del', array).then(res => {
					this.$u.toast(this.$t('system.haveDeleted'))
					this.getCartList()
				})
			},
			//提交订单
			submitOrder() {
				if (!this.checkList.length) {
					this.$u.toast(this.$t('storeManagement.SelectProduct'))
					return
				}
				let arr = []
				let Ids = []
				this.checkList.forEach(item => {
					arr.push({
						image: item.goodsImage,
						name: item.goodsName,
						priceMax: item.goodsPrice,
						specificationList: [{
							count: item.goodsNumber,
							name: item.goodsSpecification,
							price: item.goodsPrice,
							id: item.goodsSkuId,
							num:item.num
						}],
					})
					Ids.push(item.id)
				})

				uni.navigateTo({
					url: `/pages/storyType/storeManagement/purchaseDetail?item=${encodeURIComponent(JSON.stringify(arr))}`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			backEvent() {

				uni.reLaunch({
					url: '/pages/storyType/storeManagement/commodity'
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-cart-container {
		position: relative;

		.container-box {
			height: 78vh;
			overflow: auto;
			// padding-bottom: 200rpx;

			/deep/ .u-swipe-action {
				margin-bottom: 30rpx;
				border-radius: 28rpx;
				overflow: hidden;

				.u-btn-text {
					&::after {
						content: "";
						display: block;
						width: 29rpx;
						height: 32rpx;
						background-image: url('@/static/svg/delete.svg');
						background-size: cover;
					}
				}
			}

			.u-btn-text {
				&::after {
					content: "";
					display: block;
					width: 29rpx;
					height: 32rpx;
					background-image: url('@/static/svg/delete.svg');
				}
			}
		}

		.item {
			display: flex;

			&::after {
				content: none;
			}

			.title-wrap {
				width: 100%;


			}
		}

		image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}

		.title {
			text-align: left;
			font-size: 28rpx;
			color: $u-content-color;
			margin-top: 20rpx;
		}

		.cart-item-container {
			background-color: #fff;
			border-radius: 26rpx;
		}
	}

	/deep/ .u-empty {
		height: unset;
		margin-bottom: 64rpx;
	}

	/deep/ .c-navigation-bar .navbar .right {
		width: 200px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 推荐列表
	.goods-box {
		.title {
			display: flex;
			justify-content: space-between;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 48rpx;
			margin: 0rpx 40rpx 32rpx;
		}

		.reviews-main {
			margin: 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.product-card-container {
				width: 45%;
			}
		}

	}

	.cart-item-container {
		background-color: #fff;
		border-radius: 26rpx;
	}

	.footer-handle {
		display: flex;
		justify-content: space-between;
		height: 100%;
		align-items: center;

		.total-price {
			margin-left: 50rpx;

			.total {
				color: #91909A;
				font-size: 28rpx;
			}

			.price {
				color: #fff;
			}
		}

		>button {
			width: 380rpx;
			height: 100rpx;
			font-size: 32rpx;

			&:not(.button-hover[type="default"]) {
				color: #DEDEDE;
			}
		}
	}
</style>